<template>
    <ContentBox title="迁入趋势">
        <div class="qianru">
            <div class="banner">
                <div>
                    <BannerItem value="123" value-color="#EA4645" unit="万人" desc="今月实时迁入数据"></BannerItem>
                </div>
                <div>
                    <BannerItem value="123" value-color="#00C5C5" unit="万人" desc="预测明年迁入人数"></BannerItem>
                </div>
            </div>
            <div class="content">
                <qianruqushi></qianruqushi>
            </div>
        </div>
    </ContentBox>

</template>
<script>
    import ContentBox from "../../components/common/ContentBoxSmall"
    import BannerItem from "../../components/common/BannerItem"
    import qianruqushi from "./ChartsComponents/qianruqushi"

    export default {
        name: "Preview",
        components: {
            ContentBox,
            qianruqushi,
            BannerItem
        }
    }
</script>

<style lang="scss" scoped>
    .qianru {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;

        > .banner {
            height: 150px;
            display: flex;
            justify-content: space-evenly;
            >div{
                width: 45%;
            }
        }
        > .content {
            flex: 1;
        }

    }
</style>
